<template>
	<view class="content">
<canvas class="facecat" id="myCanvas" canvas-id="myCanvas" style="width:100%;height:2000rpx;" 
@touchstart="touchStartCanvas" @touchmove="touchMoveCanvas" @touchend="touchEndCanvas"/>
	</view>
</template>
<script>
import facecat from './facecat.js';
let gPaint = new facecat.FCPaint();
let latestDataStr = "";
let gridStocks = null;
let findMyCharts = new Array();
let charts = new Array();
let strCode = "600000.SH";
let strName = "浦发银行";

/*
*绘制最新数据
*/
let drawLatestDiv = function (view, paint, clipRect) {
	let avgHeight = 20;
	let drawFont = "Default,14";
	if (gPaint.isMobile) {
		drawFont = "Default,12";
	}
	let dTop = 30;
	paint.drawLine(view.borderColor, 1, [], 0, dTop, view.size.cx, dTop);
	var dataStrs = latestDataStr.split(",");
	let lastClose = 0;
	let priceList = new Array();
	let volList = new Array();
	let buySellTexts = new Array();
	if (dataStrs.length > 10) {
		paint.drawText(dataStrs[0], "rgb(175,196,228)", "Default,14", 5, 7);
		paint.drawText(dataStrs[1], "rgb(194,151,18)", "Default,14", 80, 7);
		lastClose = parseFloat(dataStrs[8]);
		priceList.push(parseFloat(dataStrs[23]));
		priceList.push(parseFloat(dataStrs[22]));
		priceList.push(parseFloat(dataStrs[21]));
		priceList.push(parseFloat(dataStrs[20]));
		priceList.push(parseFloat(dataStrs[19]));
		priceList.push(parseFloat(dataStrs[9]));
		priceList.push(parseFloat(dataStrs[10]));
		priceList.push(parseFloat(dataStrs[11]));
		priceList.push(parseFloat(dataStrs[12]));
		priceList.push(parseFloat(dataStrs[13]));

		volList.push(parseFloat(dataStrs[28]));
		volList.push(parseFloat(dataStrs[27]));
		volList.push(parseFloat(dataStrs[26]));
		volList.push(parseFloat(dataStrs[25]));
		volList.push(parseFloat(dataStrs[24]));
		volList.push(parseFloat(dataStrs[14]));
		volList.push(parseFloat(dataStrs[15]));
		volList.push(parseFloat(dataStrs[16]));
		volList.push(parseFloat(dataStrs[17]));
		volList.push(parseFloat(dataStrs[18]));
	}
	buySellTexts.push("卖5");
	buySellTexts.push("卖4");
	buySellTexts.push("卖3");
	buySellTexts.push("卖2");
	buySellTexts.push("卖1");
	buySellTexts.push("买1");
	buySellTexts.push("买2");
	buySellTexts.push("买3");
	buySellTexts.push("买4");
	buySellTexts.push("买5");
	let textColor = "rgb(175,196,228)";
	if (view.paint.defaultUIStyle == "light") {
		textColor = "rgb(0,0,0)";
	}
	let maxVol = facecat.maxValue(volList);
	for (let i = 0; i < 10; i++) {
		let tSize = paint.textSize(buySellTexts[i], drawFont);
		paint.drawText(buySellTexts[i], textColor, drawFont, 5, dTop + avgHeight / 2 - tSize.cy / 2);
		if (priceList.length > 0) {
			let price = priceList[i];
			let upDownColor = "rgb(255,82,82)";
			let upDownColor2 = "rgba(255,82,82,50)";
			if (price < lastClose) {
				upDownColor = "rgb(46,255,50)";
				upDownColor2 = "rgba(46,255,50,50)";
			}
			if (gPaint.isMobile) {
				paint.drawText(priceList[i].toFixed(2), upDownColor, drawFont, 40, dTop + avgHeight / 2 - tSize.cy / 2);
			} else {
				paint.drawText(priceList[i].toFixed(2), upDownColor, drawFont, 50, dTop + avgHeight / 2 - tSize.cy / 2);
			}
			if (maxVol > 0) {
				if (gPaint.isMobile) {
					paint.fillRect(upDownColor2, view.size.cx - volList[i] * 50 / maxVol, dTop + 2, view.size.cx, dTop + avgHeight - 2);
				} else {
					paint.fillRect(upDownColor2, view.size.cx - volList[i] * 80 / maxVol, dTop + 2, view.size.cx, dTop + avgHeight - 2);
				}
			}
			let volText = (volList[i] / 100).toFixed(0);
			let volTextSize = paint.textSize(volText, drawFont);
			paint.drawText(volText, textColor, drawFont, view.size.cx - volTextSize.cx - 10, dTop + avgHeight / 2 - volTextSize.cy / 2);
		}
		dTop += avgHeight;
	}
	paint.drawLine(view.borderColor, 1, [], 0, dTop, view.size.cx, dTop);
	paint.drawText("现价", "rgb(175,196,228)", drawFont, 5, dTop + 10);
	paint.drawText("幅度", "rgb(175,196,228)", drawFont, 5, dTop + 35);
	paint.drawText("总额", "rgb(175,196,228)", drawFont, 5, dTop + 60);
	paint.drawText("总量", "rgb(175,196,228)", drawFont, 5, dTop + 85);
	paint.drawText("开盘", "rgb(175,196,228)", drawFont, 110, dTop + 10);
	paint.drawText("振幅", "rgb(175,196,228)", drawFont, 110, dTop + 35);
	paint.drawText("最高", "rgb(175,196,228)", drawFont, 110, dTop + 60);
	paint.drawText("最低", "rgb(175,196,228)", drawFont, 110, dTop + 85);
	if (dataStrs.length > 10) {
		let close = parseFloat(dataStrs[2]);
		let high = parseFloat(dataStrs[3]);
		let low = parseFloat(dataStrs[4]);
		let open = parseFloat(dataStrs[5]);
		let volume = parseFloat(dataStrs[6]);
		let amount = parseFloat(dataStrs[7]);
		let diff = 0;
		if(lastClose > 0){
			diff = 100 * (close - lastClose) / lastClose;
		}
		
		let diff2 = 0;
		if(lastClose > 0){
			diff2 = 100 * (high - lastClose) / lastClose - 100 * (low - lastClose) / lastClose;
		}
		paint.drawText(close.toFixed(2), getPriceColor(close, lastClose), drawFont, 40, dTop + 10);
		paint.drawText(diff.toFixed(2) + "%", getPriceColor(close, lastClose), drawFont, 40, dTop + 35);
		paint.drawText((amount / 10000).toFixed(0), textColor, drawFont, 40, dTop + 60);
		paint.drawText((volume / 10000).toFixed(0), textColor, drawFont, 40, dTop + 85);

		paint.drawText(open.toFixed(2), getPriceColor(open, lastClose), drawFont, 150, dTop + 10);
		paint.drawText(diff2.toFixed(2) + "%", getPriceColor(close, lastClose), drawFont, 150, dTop + 35);
		paint.drawText(high.toFixed(2), getPriceColor(high, lastClose), drawFont, 150, dTop + 60);
		paint.drawText(low.toFixed(2), getPriceColor(low, lastClose), drawFont, 150, dTop + 85);
	}
};

/*
* 黑色风格
*/
let toBlackChart = function (chart, index) {
	chart.paint.defaultUIStyle = "dark";
	chart.backColor = "rgb(0,0,0)";
	chart.borderColor = "none";
	chart.textColor = "rgb(175,196,228)";
	chart.scaleColor = "rgb(75,75,75)";
	chart.crossTipColor = "rgb(50,50,50)";
	chart.crossLineColor = "rgb(100,100,100)";
	chart.gridColor = "rgb(50,50,50)";
	if(index > 0){
		chart.upColor = "rgb(186,56,18)";
		chart.downColor = "rgb(31,182,177)";
	}else{
		chart.upColor = "rgb(255,82,82)";
		chart.downColor = "rgb(46,255,50)";
	}
	chart.barStyle = "rect2";
	chart.candleStyle = "rect2";
	chart.trendColor = "rgb(255,255,255)";
	chart.hScaleTextColor = "rgb(194,151,18)";
    chart.vScaleTextColor = "rgb(194,151,18)";
};

/*
* 创建列
* grid:表格
*/
let createGridCell = function (grid) {
	let gridCell = new facecat.FCGridCell();
	if (grid.paint.defaultUIStyle == "dark") {
		gridCell.backColor = "none";
		gridCell.borderColor = "none";
		gridCell.textColor = "rgb(175,196,228)";
	} else if (grid.paint.defaultUIStyle == "light") {
		gridCell.backColor = "none";
		gridCell.borderColor = "none";
		gridCell.textColor = "rgb(0,0,0)";
	}
	gridCell.font = "Default,13";
	return gridCell;
};

/*
*获取价格颜色
*/
let getPriceColor = function(price, comparePrice){
	if (price != 0)
	{
		if (price > comparePrice)
		{
			return "rgb(255,82,82)";
		}
		else if (price < comparePrice)
		{
			return "rgb(46,255,50)";
		}
	}
	return "rgb(190,190,235)";
};

/*
* 根据名称查找视图
* name:名称
* views:视图集合
*/
let findViewsByType = function (findType, views, refViews) {
	let size = views.length;
	for (let i = 0; i < size; i++) {
		let view = views[i];
		if (view.viewType == findType) {
			refViews.push(view);
		} else {
			if (view.views) {
				findViewsByType(findType, view.views, refViews);
			}
		}
	}
};

/*
* 请求报价数据
*/
let queryPrice = function(codes){
  let url = "http://110.42.188.197:9968/quote?func=price&count=500&codes=" + codes;
  let xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", url, true);
  xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
          let result = xmlhttp.responseText;
          let strs = result.split("\r\n");
          for(let i = 0; i < strs.length; i++){
            let subStrs = strs[i].split(",");
            if(subStrs.length >= 15){
              let row = new facecat.FCGridRow();
              gridStocks.rows.push(row);
              let cell1 = createGridCell(gridStocks);
              cell1.value = i;
              row.cells.push(cell1);
          
              let cell2 = createGridCell(gridStocks);
              cell2.value = subStrs[0];
              cell2.textColor = "rgb(194,151,18)";
              row.cells.push(cell2);
          
              let cell3 = createGridCell(gridStocks);
              cell3.value = subStrs[1];
              row.cells.push(cell3);
          
              let close = parseFloat(subStrs[2]);
              let high = parseFloat(subStrs[3]);
              let low =  parseFloat(subStrs[4]);
              let lastClose = parseFloat(subStrs[8]);
              let cell4 = createGridCell(gridStocks);
              cell4.value = close.toFixed(2);
              cell4.textColor = getPriceColor(close, lastClose);
              row.cells.push(cell4);
          
              let diff = 0;
              if(lastClose > 0){
                diff = 100 * (close - lastClose) / lastClose;
              }
              let cell5 = createGridCell(gridStocks);
              cell5.value = diff.toFixed(2) + "%";
              cell5.textColor = getPriceColor(diff, 0);
              row.cells.push(cell5);
          
              let cell6 = createGridCell(gridStocks);
              cell6.value = (close - lastClose).toFixed(2);
              cell6.textColor = getPriceColor(close, lastClose);
              row.cells.push(cell6);
          
              let volume = parseFloat(subStrs[6]);
              let amount = parseFloat(subStrs[7]);
              let cell7 = createGridCell(gridStocks);
              cell7.value = (volume / 100 / 10000).toFixed(2) + "万";
              row.cells.push(cell7);
          
              let cell8 = createGridCell(gridStocks);
              cell8.value = (amount / 100000000).toFixed(2) + "亿";
              row.cells.push(cell8);
          
              let cell9 = createGridCell(gridStocks);
              cell9.value = parseFloat(subStrs[12]).toFixed(2);
              row.cells.push(cell9);
          
              let cell10 = createGridCell(gridStocks);
              cell10.value = parseFloat(subStrs[11]).toFixed(2);
              row.cells.push(cell10);
          
              let diff2 = 0;
              if(lastClose > 0){
                diff2 = 100 * (high - lastClose) / lastClose - 100 * (low - lastClose) / lastClose;
              }
              let cell11 = createGridCell(gridStocks);
              cell11.value = diff2.toFixed(2) + "%";
              row.cells.push(cell11);
          
              let cell12 = createGridCell(gridStocks);
              cell12.value = parseFloat(subStrs[13]).toFixed(2);
              row.cells.push(cell12);
          
              let marketValue = parseFloat(subStrs[9]) * close;
              let cell13 = createGridCell(gridStocks);
              cell13.value = (marketValue / 100000000).toFixed(2) + "亿";
              row.cells.push(cell13);
          
              let flowValue = parseFloat(subStrs[10]) * close;
              let cell14 = createGridCell(gridStocks);
              cell14.value = (flowValue / 100000000).toFixed(2) + "亿";
              row.cells.push(cell14);
          
              let cell15 = createGridCell(gridStocks);
              cell15.value = "";
              row.cells.push(cell15);
          
              let upperLimit = parseFloat(subStrs[14]);
              let lowerLimit = parseFloat(subStrs[15]);
              let cell16 = createGridCell(gridStocks);
              cell16.value = upperLimit.toFixed(2);
              cell16.textColor = getPriceColor(1, 0);
              row.cells.push(cell16);
          
              let cell17 = createGridCell(gridStocks);
              cell17.value = lowerLimit.toFixed(2);
              cell17.textColor = getPriceColor(0, 1);
              row.cells.push(cell17);
          
              let cell18 = createGridCell(gridStocks);
              cell18.value = "";
              row.cells.push(cell18);
          
              let cell19 = createGridCell(gridStocks);
              cell19.value = "";
              row.cells.push(cell19);
          
              let cell20 = createGridCell(gridStocks);
              cell20.value = "";
              row.cells.push(cell20);
          
              let cell21 = createGridCell(gridStocks);
              cell21.value = "";
              row.cells.push(cell21);
          
              let cell22 = createGridCell(gridStocks);
              cell22.value = "";
              row.cells.push(cell22);
            }
          }
          facecat.invalidateView(gridStocks);
      }
  }
  xmlhttp.send(null);
};

/*
* 请求最新数据
*/
let queryNewData = function(code){
  let url = "http://110.42.188.197:9968/quote?func=getnewdata&codes=" + code;
  let xmlhttp = new XMLHttpRequest();
  xmlhttp.open("GET", url, true);
  xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
          let result = xmlhttp.responseText;
          latestDataStr = result;
          facecat.invalidate(gPaint);
      }
  }
  xmlhttp.send(null);
};
	
	/*
	* 请求历史数据
	*/
	let queryHistoryData = function (mychart, chart, code) {
		let strCycle = mychart.exAttributes.get("cycle");
		let intCycle = parseInt(strCycle);
		let url = "http://110.42.188.197:9968/quote?func=getkline&code=" + code +  "&cycle=" + strCycle + "&count=500";
		if(intCycle == 0){
			url = "http://110.42.188.197:9968/quote?func=getkline&code=" + code +  "&cycle=0&count=240";
		}
    let xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", url, true);
    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
          let result = xmlhttp.responseText;
          let strs = result.split("\r\n");
          let dataList = new Array();
          chart.firstOpen = 0;
          if(intCycle == 0){
            let fStrs = strs[0].split(" ");
            if(fStrs.length >= 3){
                chart.firstOpen = parseFloat(fStrs[2]);
            }
          }
          for(let i = 2; i < strs.length; i++){
            let subStrs = strs[i].split(",");
            if(subStrs.length >= 7){
              let data = new facecat.SecurityData();
              if(intCycle < 1440){
                let date = new Date(subStrs[0] + " " + subStrs[1].substring(0, 2) + ":" + subStrs[1].substring(2, 4) + ":00");
                data.open = parseFloat(subStrs[2]);
                data.high = parseFloat(subStrs[3]);
                data.low = parseFloat(subStrs[4]);
                data.close = parseFloat(subStrs[5]);
                data.volume = parseFloat(subStrs[6]);
                data.date = date.getTime();
                if(intCycle == 0 && (data.volume > 0 || dataList.length == 0)){
                  chart.lastValidIndex = dataList.length;
                  if(chart.firstOpen == 0){
                    chart.firstOpen = data.close;
                  }
                }
              }else{
                let date = new Date(subStrs[0]);
                data.open = parseFloat(subStrs[1]);
                data.high = parseFloat(subStrs[2]);
                data.low = parseFloat(subStrs[3]);
                data.close = parseFloat(subStrs[4]);
                data.volume = parseFloat(subStrs[5]);
                data.date = date.getTime();
              }
              dataList.push(data);
            }
          }
          if(intCycle == 0){
            chart.autoFillHScale = true;
            chart.cycle = "trend";
          }else if(intCycle < 1440){
            chart.cycle = "minute";
          }else{
            chart.cycle = "day";
          }
          chart.datas = dataList;
          let maxVisibleRecord = facecat.getChartMaxVisibleCount(chart, chart.hScalePixel, facecat.getChartWorkAreaWidth(chart));
          chart.lastVisibleIndex = chart.datas.length - 1;
          if (maxVisibleRecord > chart.datas.length) {
            chart.firstVisibleIndex = 0;
          } else {
            chart.firstVisibleIndex = chart.lastVisibleIndex - maxVisibleRecord + 1;
          }
          facecat.resetChartVisibleRecord(chart);
          facecat.checkChartLastVisibleIndex(chart);
          facecat.calcChartIndicator(chart);
          facecat.invalidateView(chart);
      }
  }
  xmlhttp.send(null);
};

/*
* 重绘背景的实现方法
* view:视图
* paint:绘图对象
* clipRect:裁剪区域
*/
gPaint.onPaint = function (view, paint, clipRect) {
	if(view.viewType == "latestdiv"){
		drawLatestDiv(view, paint, clipRect);
	}else{
		facecat.onPaintDefault(view, paint, clipRect);
	}
};

/*
* 点击单元格事件
* grid 表格
* row 行
* gridColumn 列
* cell 单元格
* firstTouch:是否第一次触摸
* secondTouch:是否第二次触摸
* firstPoint:第一次触摸的坐标
* secondPoint:第二次触摸的坐标
*/
gPaint.onClickGridCell = function (grid, row, gridColumn, cell, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
	let code = row.cells[1].value;
	let name = row.cells[2].value;
	for(let i = 0; i < findMyCharts.length && i < 3; i++){
		let myChart = findMyCharts[i];
		let chart = charts[i];
		chart.text = code + " " + name;
		queryHistoryData(myChart, chart, code);
	}
	queryNewData(code);
	facecat.invalidate(grid.paint);
};

/*
* 点击方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
* clicks:点击次数
*/
gPaint.onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
  facecat.onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
  if(view.viewName && view.viewName.indexOf("cycle,") == 0){  
      let strs = view.viewName.split(",");
      let index = parseInt(strs[1]);
      let cycleInt = parseInt(strs[2]);
      findMyCharts[index].exAttributes.set("cycle", cycleInt);
      queryHistoryData(findMyCharts[index], charts[index], charts[index].text.split(" ")[0])
  }
};

/**
 * 绘制横轴刻度的自定义方法
 * chart:图表
 * paint:绘图对象
 * clipRect:裁剪区域
 */
gPaint.onPaintChartHScale = function(chart, paint, clipRect){
  if (chart.datas && chart.datas.length > 0 && chart.hScaleHeight > 0) {
      if(chart.cycle == "trend"){
          let times = new Array();
          if (chart.size.cx < 600)
          {
              times.push(10 * 60 + 30);
              times.push(11 * 60 + 30);
              times.push(14 * 60);
          }
          else
          {
              times.push(10 * 60);
              times.push(10 * 60 + 30);
              times.push(11 * 60);
              times.push(11 * 60 + 30);
              times.push(13 * 60 + 30);
              times.push(14 * 60);
              times.push(14 * 60 + 30);
          }
          for(let i = chart.firstVisibleIndex; i <= chart.lastVisibleIndex; i++){
              let dateNum = chart.datas[i].date;
              let date = new Date();
              date.setTime(dateNum); 
              let hour = date.getHours();
              let minute = date.getMinutes();
              for(let j = 0; j < times.length; j++){
                  if(times[j] == hour * 60 + minute){
                      let x = facecat.getChartX(chart, i);
                      let bBottom = chart.size.cy;
                      paint.drawLine(chart.scaleColor, 1, 0, x, bBottom - chart.hScaleHeight, x, bBottom - chart.hScaleHeight + 12);
                      paint.drawLine(chart.gridColor, 1, 0, x, 0, x, bBottom - chart.hScaleHeight);
                      let xText = facecat.dateFormat("HH:MM", date);
                      let tSize = paint.textSize(xText, "Default,12");
                      paint.drawText(xText, chart.hScaleTextColor, "Default,12", x - tSize.cx / 2, bBottom - chart.hScaleHeight / 2 - tSize.cy / 2);
                      break;
                  }
              }
          }
      }else if(chart.cycle == "minute"){
          let lastYear = 0;
          let lastDate2 = 0;
          let dLeft = chart.leftVScaleWidth;
          for(let i = chart.firstVisibleIndex; i <= chart.lastVisibleIndex; i++){
              let dateNum = chart.datas[i].date;
              let date = new Date();
              date.setTime(dateNum); 
              let year = date.getFullYear();
              let xText = "";
              if (year != lastYear)
              {
                  xText = facecat.dateFormat("YYYY/mm/dd", date);
              }
              else
              {
                  xText = facecat.dateFormat("mm/dd", date);
              }
              if (parseInt(lastDate2 / 86400000) != parseInt(dateNum / 86400000))
              {
                  lastDate2 = dateNum;
                  lastYear = year;
                  let tSize = paint.textSize(xText, "Default,12");
                  let x = facecat.getChartX(chart, i);
                  let dx = x + 2;
                  if (dx > dLeft && dx + tSize.cx < chart.size.cx - chart.rightVScaleWidth - 5)
                  {
                      let bBottom = chart.size.cy;
                      paint.drawLine(chart.scaleColor, 1, 0, x, bBottom - chart.hScaleHeight, x, bBottom - chart.hScaleHeight + 12);
                      paint.drawText(xText, chart.hScaleTextColor, "Default,12", dx, bBottom - chart.hScaleHeight / 2 - tSize.cy / 2);
                      i = i + parseInt((tSize.cx + chart.hScaleTextDistance) / chart.hScalePixel) + 1;
                  }
              }
          }
      }
      else if(chart.cycle == "day"){
          let drawLeft = chart.leftVScaleWidth; //左侧起画点
          let i = chart.firstVisibleIndex; //开始索引
          let lastYear = 0; //缓存年份，用于判断是否换年
          let drawYearsCache = []; //实际绘制到图形上的年份文字
          let lastTextRight = 0; //上个文字的右侧
          let timeCache = []; //保存日期的缓存
          let yearTextLeftCache = []; //绘制年文字的左侧位置缓存
          let yearTextRightCache = []; //绘制年文字的右侧位置缓存
          let textPadding = 5; //两个文字之间的最小间隔
          //逐步递增索引，先绘制年
          while(i <= chart.lastVisibleIndex){
              let dateObj = new Date();
              dateObj.setTime(chart.datas[i].date); //将时间戳转换为time，并缓存到集合中
              timeCache.push(dateObj);
              let year = dateObj.getFullYear(); //从结构中获取年份			
              let x = facecat.getChartX(chart, i); //获取索引对应的位置
              //判断是否换年，以及是否在绘图区间内
              if (year != lastYear && x >= drawLeft && x < chart.size.cx - chart.rightVScaleWidth){
                  let month = dateObj.getMonth() + 1; //获取月的结构
                  let xText = year.toString(); //拼接要绘制的文字
                  if (month < 10){
                      xText = xText + "/0" + month.toString(); //如果小于10月要补0
                  }
                  else{
                      xText = xText + "/" + month.toString(); //大于等于10月不用补0
                  }
                  let tSize = paint.textSize(xText, chart.font); //计算要绘制文字的大小
                  paint.drawLine(chart.scaleColor, 1, 0, x, chart.size.cy - chart.hScaleHeight, x, chart.size.cy - chart.hScaleHeight + 8) //绘制刻度线
                  //判断是否和上个文字重影
                  if (x + 2 > lastTextRight + textPadding){
                      paint.drawText(xText, chart.hScaleTextColor, "Default,12", x + 2, chart.size.cy - chart.hScaleHeight + 8  - tSize.cy / 2 + 7) //绘制文字
                      yearTextLeftCache.push(x + 2); //将年文字的左侧位置缓存
                      yearTextRightCache.push(x + 2 + tSize.cx); //将年文字的右侧位置缓存
                      drawYearsCache.push(year); //缓存要绘制的年
                      lastTextRight = x + 2 + tSize.cx; //缓存上个文字的右侧位置
                  }
                  lastYear = year; //记录上次绘制的年份
              }
              i = i + 1;	//索引累加
          }	
          //绘制月份
          for(let m = 0; m < drawYearsCache.length; m++){
              let cacheYear = drawYearsCache[m]; //从缓存中获取年份
              let lastMonth = 0; //缓存月份，用于判断是否换月
              i = chart.firstVisibleIndex; //重置开始索引
              lastTextRight = 0; //重置上个文字的右侧
              //逐步递增索引
              while (i <= chart.lastVisibleIndex){
                  let dateObj = timeCache[i - chart.firstVisibleIndex]; //从缓存中获取time
                  let year = dateObj.getFullYear(); //从结构中获取年份
                  //判断是否同一年	
                  if (cacheYear == year){
                      let month = dateObj.getMonth() + 1; //从结构中获取月份
                      let x = facecat.getChartX(chart, i);
                      //判断是否换月，以及是否在绘图区间内
                      if(lastMonth != month && x >= drawLeft && x < chart.size.cx - chart.rightVScaleWidth){		
                          let xText = month.toString(); //获取绘制的月份文字
                          let tSize = paint.textSize(xText, chart.font); //计算要绘制文字的大小
                          //判断是否和上个文字重影
                          if(x + 2 > lastTextRight + textPadding){
                              if ((x + 2 > yearTextRightCache[m] + textPadding) 
                              && ((m == drawYearsCache.length - 1) 
                              || ((m < drawYearsCache.length - 1) 
                              && (x + 2 + tSize.cx < yearTextLeftCache[m + 1] - textPadding)))){
                                  paint.drawLine(chart.scaleColor, 1, 0, x, chart.size.cy - chart.hScaleHeight, x, chart.size.cy - chart.hScaleHeight + 6); //绘制刻度
                                  paint.drawText(xText, chart.hScaleTextColor, "Default,12", x + 2, chart.size.cy - chart.hScaleHeight + 8  - tSize.cy / 2 + 7); //绘制文字
                                  lastTextRight = x + 2 + tSize.cx; //缓存上个文字的右侧位置
                              }
                          }
                          lastMonth = month //记录上次绘制的月份
                      }
                  }
                  else if(cacheYear < year){
                      break; //超过区间，退出循环
                  }
                  i = i + 1;	//索引累加
              }
          }
      }
  }
};

/*
 * 重置大小
 */
let resizeAll = function () {
	try {
		const canvas = document.getElementById('myCanvas');
		canvas.width = document.documentElement.clientWidth;
		canvas.height = document.documentElement.clientHeight;
		facecat.scaleCanvas(gPaint);
		facecat.updateViewDefault(gPaint.views);
	} catch (err) {
	}
	facecat.invalidate(gPaint);
};
	
export default { 
	data() {
		return {
			widthEle : 0, 
			heightEle: 0,
		}
	},
	mounted(){
		let canvas = null;
		if(document){
			canvas = document.querySelector('#myCanvas');
			gPaint.isMobile = facecat.isMobileMode();
			facecat.addDefaultEvent(canvas, gPaint);
		}else{
			canvas = uni.createSelectorQuery('#myCanvas');
			gPaint.isMobile = true;
		}
		gPaint.defaultUIStyle = "dark";
		//注册事件
		uni.getSystemInfo({ 
		  success: (res) => {
			this.widthEle = res.windowWidth;
			this.heightEle = res.windowHeight;
		  }
		});
		this.windowResizeCallback = (res) => {
			try {
				this.widthEle = res.size.windowWidth;
				this.heightEle = res.size.windowHeight;
				let canvas = null;
				if(document){
					canvas = document.querySelector('#myCanvas');
				}else{
					canvas = uni.createSelectorQuery('#myCanvas');
				}
				canvas.width = this.widthEle;
				canvas.height = this.heightEle;
				facecat.updateViewDefault(gPaint.views);
			} catch (err) {
			}
			facecat.invalidate(gPaint);
		};
		canvas.width = this.widthEle;
		canvas.height = this.heightEle;
		gPaint.canvas = canvas;
		gPaint.container = this;
		//解析加载XML
		let xml = `<?xml version="1.0" encoding="utf-8" ?>
		<html xmlns="facecat">
		<body>
			<div bordercolor="none" name="divInner" dock="fill">
				<div type="tab" dock="fill" selectedindex="0" backcolor="none" bordercolor="none"
				name="tabFunc">
					<div type="tabpage" text="主界面" name="divMain" backcolor="none">
					<div type="splitlayout" layoutstyle="lefttoright" bordercolor="none" dock="fill"
							size="650,510" candragsplitter="true" splitterposition="650,1" name="divCodingRight2">
							<table name="gridStocks" headerheight="30" dock="fill"
								gridlinecolor="none" bordercolor="none" showvscrollbar="true" showhscrollbar="true"
								allowpreviewsevent="true" allowdragscroll="true">
								<tr>
									<th name="colP0" text="序" width="40" allowdrag="true" allowresize="true"/>
									<th name="colP1" text="代码" width="70" allowdrag="true" allowresize="true"/>
									<th name="colP2" text="名称" width="70" allowdrag="true" allowresize="true" />
									<th name="colP3" text="现价" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP4" text="涨幅" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP5" text="涨跌" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP9" text="总量" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP10" text="总额" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP11" text="量比" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP12" text="PE动" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP13" text="振幅" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP14" text="换手率" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP15" text="总市值" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP16" text="流值" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP17" text="行业分类板块" width="80" allowdrag="true" allowresize="true" cellalign="center"/>
									<th name="colP18" text="涨停价" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP19" text="跌停价" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP20" text="金比" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP21" text="涨跌比" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP22" text="涨速" width="60" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP23" text="净资产收益率" width="100" allowdrag="true" allowresize="true" cellalign="right"/>
									<th name="colP24" text="自设指标" width="80" allowdrag="true" allowresize="true" cellalign="right"/>
								</tr>
							</table>
							<div type="splitlayout" layoutstyle="toptobottom" bordercolor="none" dock="fill"
								size="400,400" candragsplitter="true" splitterposition="380,1">
								<div type="splitlayout" layoutstyle="righttoleft" bordercolor="none" dock="fill"
									size="400,400" candragsplitter="true" splitterposition="200,1">
									<div type="custom" cid="latestdiv" name="divLatest"/>
									<div type="custom" cid="mychart" name="mainChart1" cycle="0" candledivpercent="0.7"
											voldivpercent="0.3" backcolor="none" bordercolor="none"/>
								</div>
								<div type="splitlayout" layoutstyle="lefttoright" bordercolor="none" dock="fill"
									size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="200,1">
									<div type="custom" cid="mychart" name="mainChart2" cycle="5" candledivpercent="0.7"
											voldivpercent="0.3" backcolor="none" bordercolor="none"/>
									<div type="custom" cid="mychart" name="mainChart3" cycle="1440" candledivpercent="0.7"
											voldivpercent="0.3" backcolor="none" bordercolor="none"/>
								</div>
							</div>
						</div>
						</div>
						<div type="tabpage" text="多K线" name="divMulti" backcolor="none">
							<div type="splitlayout" layoutstyle="lefttoright" backcolor="none" bordercolor="none"
								dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="133,1">
								<div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
									dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="267,1">
									<div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
										dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="200,1">
										<div type="custom" cid="mychart" name="chart1" cycle="1" nativerefresh="true" candledivpercent="1"
											voldivpercent="0" backcolor="none" bordercolor="none"/>
										<div type="custom" cid="mychart" name="chart2" cycle="5" nativerefresh="true" candledivpercent="1"
											voldivpercent="0" backcolor="none" bordercolor="none"/>
									</div>
									<div type="custom" cid="mychart" name="chart3" cycle="10" nativerefresh="true" candledivpercent="1"
										voldivpercent="0" backcolor="none" bordercolor="none"/>
								</div>
								<div type="splitlayout" layoutstyle="lefttoright" backcolor="none" bordercolor="none"
									dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="200,1">
									<div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
										dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="267,1">
										<div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
											dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="200,1">
											<div type="custom" cid="mychart" name="chart4" cycle="15" nativerefresh="true" candledivpercent="1"
												voldivpercent="0" backcolor="none" bordercolor="none"/>
											<div type="custom" cid="mychart" name="chart5" cycle="20" nativerefresh="true" candledivpercent="1"
												voldivpercent="0" backcolor="none" bordercolor="none"/>
										</div>
										<div type="custom" cid="mychart" name="chart6" cycle="30" nativerefresh="true" candledivpercent="1"
											voldivpercent="0" backcolor="none" bordercolor="none"/>
									</div>
									<div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
										dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="267,1">
										<div type="splitlayout" layoutstyle="toptobottom" backcolor="none" bordercolor="none"
											dock="fill" size="400,400" candragsplitter="true" splitmode="percentsize" splitterposition="200,1">
											<div type="custom" cid="mychart" name="chart7" cycle="1440" nativerefresh="true"
												candledivpercent="1" voldivpercent="0" backcolor="none" bordercolor="none"/>
											<div type="custom" cid="mychart" name="chart8" cycle="10080" nativerefresh="true"
												candledivpercent="1" voldivpercent="0" backcolor="none" bordercolor="none"/>
										</div>
										<div type="custom" cid="mychart" name="chart9" cycle="43200" nativerefresh="true"
											candledivpercent="1" voldivpercent="0" backcolor="none" bordercolor="none"/>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
		</body>
		</html>`;
		facecat.renderFaceCat(gPaint, xml);
		gridStocks = facecat.findViewByName("gridStocks", gPaint.views);
		for(let i = 3; i < gridStocks.columns.length; i++){
			gridStocks.columns[i].cellAlign = "right";
		}
		gridStocks.selectedRowColor = "rgb(75,75,75)";
		gridStocks.alternateRowColor = "rgb(25,25,25)";
		findViewsByType("mychart", gPaint.views, findMyCharts);
		for(let i = 0; i < findMyCharts.length; i++){
			let myChart = findMyCharts[i];
			let splitDiv = new facecat.FCSplitLayoutDiv();
			splitDiv.layoutStyle = "toptobottom";
			splitDiv.size = new facecat.FCSize(400, 400);
			splitDiv.backColor = "none";
			splitDiv.borderColor = "none";
			splitDiv.dock = "fill";
			facecat.addViewToParent(splitDiv, myChart);

			let topDiv = new facecat.FCLayoutDiv();
			topDiv.backColor = "none";
			topDiv.borderColor = "none";
			topDiv.layoutStyle = "lefttoright";
			topDiv.showHScrollBar = false;
			facecat.addViewToParent(topDiv, splitDiv);

			let bottomDiv = new facecat.FCDiv();
			bottomDiv.backColor = "none";
			bottomDiv.borderColor = "none";
			facecat.addViewToParent(bottomDiv, splitDiv);

			splitDiv.firstView = topDiv;
			splitDiv.secondView = bottomDiv;

			let splitter = new facecat.FCView();
			splitter.parent = splitDiv;
			if (gPaint.defaultUIStyle == "dark") {
				splitter.backColor = "rgb(75,75,75)";
			} else if (gPaint.defaultUIStyle == "light") {
				splitter.backColor = "rgb(150,150,150)";
			}
			splitter.borderColor = "none";
			splitter.paint = gPaint;
			splitDiv.views.push(splitter);
			splitDiv.splitter = splitter;
			splitter.size = new facecat.FCSize(400, 1);
			splitter.location = new facecat.FCPoint(0, 30);
			if(i == 0){
				splitter.location = new facecat.FCPoint(0, 0);
			}

			let chart = new facecat.FCChart();
			chart.leftVScaleWidth = 70;
			chart.rightVScaleWidth = 70;
			if(i > 0){
                chart.leftVScaleWidth = 0;
            }
			chart.vScaleDistance = 35;
			chart.hScalePixel = 11;
			chart.hScaleHeight = 30;
			chart.candlePaddingTop = 30;
			chart.candlePaddingBottom = 20;
			chart.volPaddingTop = 20;
			chart.volPaddingBottom = 0;
			chart.vScaleDistance = 35;
			chart.dock = "fill";
			chart.font = "Default,12";
			chart.candleDivPercent = parseFloat(myChart.exAttributes.get("candledivpercent"));
			chart.volDivPercent = parseFloat(myChart.exAttributes.get("voldivpercent"));
			chart.indDivPercent = 0;
			if (gPaint.isMobile) {
				chart.rightVScaleWidth = 0;
				chart.leftVScaleWidth = 60;
			}
			chart.text = strCode + " " + strName;
			let intCycle = parseInt(myChart.exAttributes.get("cycle"));
			if(intCycle == 0){
				chart.text += " 分时";
			}else if(intCycle < 1440){
				chart.text += " " + intCycle.toString() + "分钟";
			}else if(intCycle == 1440){
				chart.text += " 日线";
			}else if(intCycle == 10080){
				chart.text += " 周线";
			}else if(intCycle == 43200){
				chart.text += " 月线";
			}
			chart.allowDragChartDiv = true;
			charts.push(chart);
			facecat.addViewToParent(chart, bottomDiv);
			toBlackChart(chart, i);
			queryHistoryData(myChart, chart, strCode);

			let cycles = new Array();
			cycles.push("1");
			cycles.push("5");
			cycles.push("10");
			cycles.push("15");
			cycles.push("20");
			cycles.push("30");
			cycles.push("60");
			cycles.push("90");
			cycles.push("120");
			cycles.push("日");
			cycles.push("周");
			cycles.push("月");
			cycles.push("季");
			cycles.push("半");
			cycles.push("年");
			let cyclesInts = new Array();
			cyclesInts.push(1);
			cyclesInts.push(5);
			cyclesInts.push(10);
			cyclesInts.push(15);
			cyclesInts.push(20);
			cyclesInts.push(30);
			cyclesInts.push(60);
			cyclesInts.push(90);
			cyclesInts.push(120);
			cyclesInts.push(1440);
			cyclesInts.push(10080);
			cyclesInts.push(43200);
			cyclesInts.push(129600);
			cyclesInts.push(259200);
			cyclesInts.push(518400);
			for(let c = 0; c < cycles.length; c++){
				let cycleButton = new facecat.FCButton();
				cycleButton.text = cycles[c];
				cycleButton.size = new facecat.FCSize(27, 30);
				cycleButton.textColor = "rgb(200,200,200)";
				cycleButton.borderColor = "rgb(50,50,50)";
				cycleButton.backColor = "none";
				cycleButton.viewName = "cycle," + i.toString() + "," + cyclesInts[c].toString();
				facecat.addViewToParent(cycleButton, topDiv);
			}
		}
		queryNewData(strCode);
		queryPrice("all");
		facecat.updateViewDefault(gPaint.views);
		facecat.invalidate(gPaint);
		uni.onWindowResize(this.windowResizeCallback);
	},
	methods: {
		touchStartCanvas: function (e) {
			facecat_uni.handleTouchStart(gPaint, e, null);
		},touchMoveCanvas: function (e) {
			facecat_uni.handleTouchMove(gPaint, e, null);
		},touchEndCanvas: function (e) {
			facecat_uni.handleTouchEnd(gPaint, e, null, null);
		}
	}
}
</script>

<style>
</style>
